<template>
    <div class="attribute-content">
        <div class="land-attribute">
            <div class="land-attribute-item" >
                <span class="land-item-lable">地块评价等级:</span>
                <span class="land-item-content" style="color: yellow">A</span>
            </div>
        </div>
        <div class="land-attribute">
            <div class="land-attribute-item" >
                <span class="land-item-lable">地块编号:</span>
                <span class="land-item-content">3204124000010070-0</span>
            </div>
            <div class="land-attribute-item" >
                <span class="land-item-lable">开发区名称:</span>
                <span class="land-item-content">江苏武进经济开发区</span>
            </div>
        </div>
        <div class="land-attribute">
            <div class="land-attribute-item" >
                <span class="land-item-lable">土地坐落:</span>
                <span class="land-item-content">江苏武进经济开发区西太湖大道9号</span>
            </div>
        </div>
        <div class="land-attribute">
            <div class="land-attribute-item" >
                <span class="land-item-lable">土地面积:</span>
                <span class="land-item-content">182596.035288</span>
            </div>
            <div class="land-attribute-item" >
                <span class="land-item-lable">建筑面积:</span>
                <span class="land-item-content">85980.4408568</span>
            </div>
            <div class="land-attribute-item" >
                <span class="land-item-lable">所有权人:</span>
                <span class="land-item-content">某某某</span>
            </div>
        </div>
        <div class="land-attribute">
            <div class="land-attribute-item" >
                <span class="land-item-lable">所属产业类别:</span>
                <span class="land-item-content">其他制造业</span>
            </div>
        </div>
        <div class="land-attribute">
            <div class="land-attribute-item" >
                <span class="land-item-lable">用地单位:</span>
                <span class="land-item-content">威斯克精密五金（常州）有限公司</span>
            </div>
            <div class="land-attribute-item" >
                <span class="land-item-lable">法人代表:</span>
                <span class="land-item-content">某某某</span>
            </div>
        </div>
        <div>
            <el-table
                    :data="tableData"
                    style="width: 100%;margin-top: 10px">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="企业名称:">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                            <el-form-item label="用地面积:">
                                <span>{{ props.row.ydmj }}</span>
                            </el-form-item>
                            <el-form-item label="实缴税收:">
                                <span>{{ props.row.sjsh }}</span>
                            </el-form-item>
                            <el-form-item label="开票销售:">
                                <span>{{ props.row.kpxs }}</span>
                            </el-form-item>
                            <el-form-item label="评价得分:">
                                <span>{{ props.row.pjdf }}</span>
                            </el-form-item>
                            <el-form-item label="排名:">
                                <span>{{ props.row.pm }}</span>
                            </el-form-item>
                            <el-form-item label="评价等级:">
                                <span>{{ props.row.level }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="评价等级"
                        prop="level">
                </el-table-column>
                <el-table-column
                        label="企业名称"
                        prop="name">
                </el-table-column>
                <el-table-column
                        label="用地面积"
                        prop="ydmj">
                </el-table-column>
                <el-table-column
                        label="开票销售"
                        prop="kpxs">
                </el-table-column>
                <el-table-column
                        label="评价得分"
                        prop="pjdf">
                </el-table-column>
                <el-table-column
                        label="排名"
                        prop="pm">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    export default {
        props:['onelandarrtibutes'],
        data() {
            return {
                landproperties:{},
                tableData: [{
                    id: '1',
                    level:'A',
                    name: '常州翔辉不锈钢制品有限公司',
                    ydmj: '1530000平方米',
                    sjsh: '46.46',
                    kpxs: '2156.42',
                    pjdf: '100',
                    pm: '181'
                }, {
                    id: '2',
                    level:'A',
                    name: '常州龙翔气弹簧股份有限公司',
                    ydmj: '37400000平方米',
                    sjsh: '174.97',
                    kpxs: '12893.98',
                    pjdf: '34.22',
                    pm: '3610'
                }, {
                    id: '3',
                    level:'B',
                    name: '顺丰运输(常州)有限公司',
                    ydmj: '840000平方米',
                    sjsh: '0',
                    kpxs: '0',
                    pjdf: '0',
                    pm: '9611'
                }]
            };
        }
    };
</script>
<style lang="scss" scoped>
    .attribute-content{
        width: 35%;
        height:45%;
        position: absolute;
        padding: 0;
        opacity: 1;
        z-index: 1;
        right: 15%;
        bottom: 45%;
        background: rgba(0,60,136,0.7);
        color: white;
        border: 0;
        transition: opacity 100ms ease-in;
        display: flex;
        flex-direction: column;
        overflow: auto;

    }
    .land-attribute{
        display: flex;
        flex-direction: row;


    }
    .land-attribute-item{
        display: flex;
        flex-direction: row;
        margin: 10px 10px;
    }
    .land-item-lable{
        white-space:nowrap;
    }
    .land-item-content{
        white-space:nowrap;
        margin-left: 5px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
